import * as React from 'react';

export function Table({ title, children, width }) {
  return (
    <div className="table">
      <div className="table-header">{title}</div>
      {children}
      <style jsx>{`
        .table {
          width: ${width};
        }
        .table-header {
          width: 100%;
          height: 35px;
          background-color: var(--color-table-header);
          border-top-left-radius: 8px;
          border-top-right-radius: 8px;
          font-size: 14px;
          line-height: 35px;
          text-indent: 12px;
          color: black;
          font-weight: 500;
          border: 1px solid #d8dee4;
          border-bottom-width: 0px;
        }
      `}</style>
    </div>
  );
}
